import { useMemo } from 'react';
import Image from 'next/image';

export function LocalFileItem({ file }: { file: File }) {
  const isImage = file.type.startsWith('image');

  const url = useMemo(() => {
    if (isImage) return URL.createObjectURL(file);

    return '';
  }, [file, isImage]);

  return <FileItem isImage={isImage} url={url} name={file.name} />;
}

export function RemoteFileItem({
  id,
  name,
  contentType,
}: {
  contentType: string;
  id: string;
  name: string;
}) {
  const isImage = contentType.startsWith('image');

  return <FileItem id={id} isImage={isImage} name={name} url="" />;
}

export function FileItem({
  url,
  name,
  isImage,
  id,
}: {
  id?: string;
  isImage: boolean;
  url: string;
  name: string;
}) {
  return isImage ? (
    <img src={id ? `/api/image/${id}` : url} alt={name} />
  ) : (
    <Image
      src="/unknown-file-type.png"
      alt="unknown file type"
      width={100}
      height={100}
    />
  );
}
